<template>
  <div class="select-container myStyle">
    <el-select :filterable="filterable" v-model="activeName" :clearable="clearable" :size="size"
      :style="{ width: width + ' !important' }" @change="handeleChange" collapse-tags :placeholder="placeholder"
      :multiple="multiple">
      <el-option v-for="(item, index) in options" :key="index" :label="item[props.label]"
        :value="item[props.value]"></el-option>
    </el-select>
  </div>
</template>

<script>
  /*
    props values 绑定value、label字段
    placeholder 提示语,默认 "请选择"
    isSelected 是否以选项第一个作为当前项,默认false
    multiple 是否多选,默认false,
    title   选择器名称,
    size: 选择器尺寸,默认mini
    width 选择器宽度,默认element-ui自带的默认宽度
    filterable:过滤数据
    options:[
      { value 必填 , label 选填,如果不传,以value的值展示 }
    ]
  */

  export default {
    name: "",
    props: {
      placeholder: {
        type: String,
        default: "请选择",
      },
      multiple: {
        type: Boolean,
        default: false,
      },

      value: {
        type: [
          String, Number
        ],
        default: "",
      },
      props: {
        type: Object,
        default: () => {
          return {
            label: "label",
            value: "value"
          };
        },
      },
      options: {
        type: Array,
        default: () => {
          return [{ value: '1', label: '选项1' }, { value: '2', label: '选项2' }];
        },
      },
      size: {
        type: String,
        default: "small",
      },
      isSelected: {
        type: Boolean,
        default: false,
      },
      filterable: {
        type: Boolean,
        default: false,
      },
      clearable: {
        type: Boolean,
        default: true,
      },
      width: {
        type: String,
        default: "130px",
      },
    },

    data() {
      return {
        activeName: ''
      };
    },
    watch: {
      value: { // 对对象进行深度监听
        handler(newVal, oldVal) {
          this.activeName = newVal
        },
        immediate: true,
        deep: true
      },
    },

    methods: {
      handeleChange(e) {
        this.$emit("change", e);
      },
    },
  };
</script>

<style lang="scss" scoped>
  .select-container {
    display: flex;


    i {
      color: #2b5e88 !important;
    }
  }
</style>
<style>
  
</style>